
<!DOCTYPE html>
<html>
<head>
    <title>Chrome Extension Storage Debugger</title>
    <style>
        body { font-family: Arial, sans-serif; margin: 20px; }
        .container { max-width: 800px; margin: 0 auto; }
        .rule { border: 1px solid #ddd; padding: 10px; margin: 10px 0; border-radius: 5px; }
        .rule-header { font-weight: bold; color: #333; }
        .rule-details { margin-top: 5px; }
        .rule-field { margin: 2px 0; }
    </style>
</head>
<body>
    <div class="container">
        <h1>Chrome Extension Storage Content</h1>
        <div id="storage-content">
            <p>Loading storage content...</p>
        </div>
    </div>
    
    <script>
        // 模拟Chrome存储API
        const chrome = {
            storage: {
                local: {
                    get: function(keys, callback) {
                        // 模拟异步获取存储内容
                        setTimeout(() => {
                            // 这里应该从实际存储中获取数据
                            callback({
                                interceptionRules: [
                                    {
                                        id: 'rule_1',
                                        name: '🏦 杭州银行流水',
                                        urlPattern: '/uc-server/service/hzDealDetailReport/hzDealDetailQuery',
                                        matchType: 'includes',
                                        method: '',
                                        apiEndpoint: 'http://127.0.0.1:9001/api/v1/plugin/data/receive',
                                        dataType: 'bank',
                                        enabled: true,
                                        loading: false,
                                        createTime: '2023-04-01'
                                    },
                                    {
                                        id: 'rule_2',
                                        name: '📦 政采云订单',
                                        urlPattern: '/api/mall/order/list',
                                        matchType: 'exact',
                                        method: 'POST',
                                        apiEndpoint: 'http://127.0.0.1:9001/api/v1/plugin/data/receive',
                                        dataType: 'order',
                                        enabled: true,
                                        loading: false,
                                        createTime: '2023-04-01'
                                    },
                                    {
                                        id: 'rule_3',
                                        name: '📢 政采云公告',
                                        urlPattern: '/announcement/lobby/queryPage',
                                        matchType: 'includes',
                                        method: '',
                                        apiEndpoint: 'http://127.0.0.1:9001/api/v1/plugin/data/receive',
                                        dataType: 'announcement',
                                        enabled: true,
                                        loading: false,
                                        createTime: '2023-04-01'
                                    }
                                ]
                            });
                        }, 100);
                    }
                }
            }
        };
        
        // 格式化数据类型显示
        function formatDataType(dataType) {
            switch (dataType) {
                case 'bank':
                    return '🏦 银行流水';
                case 'order':
                    return '📦 订单数据';
                case 'invoice':
                    return '🧾 发票数据';
                case 'announcement':
                    return '📢 公告信息';
                default:
                    return '📄 其他数据';
            }
        }
        
        // 加载存储内容
        chrome.storage.local.get(['interceptionRules'], function(result) {
            const container = document.getElementById('storage-content');
            
            if (result && result.interceptionRules) {
                let html = '<h2>Interception Rules (' + result.interceptionRules.length + ' rules)</h2>';
                
                result.interceptionRules.forEach((rule, index) => {
                  html += '<div class="rule">';
                  html += '<div class="rule-header">Rule ' + (index + 1) + ': ' + rule.name + '</div>';
                  html += '<div class="rule-details">';
                  html += '<div class="rule-field"><strong>ID:</strong> ' + rule.id + '</div>';
                  html += '<div class="rule-field"><strong>URL Pattern:</strong> ' + rule.urlPattern + '</div>';
                  html += '<div class="rule-field"><strong>Match Type:</strong> ' + (rule.matchType || 'includes') + '</div>';
                  html += '<div class="rule-field"><strong>Method:</strong> ' + (rule.method || 'ALL') + '</div>';
                  html += '<div class="rule-field"><strong>API Endpoint:</strong> ' + rule.apiEndpoint + '</div>';
                  html += '<div class="rule-field"><strong>Data Type:</strong> ' + formatDataType(rule.dataType) + '</div>';
                  html += '<div class="rule-field"><strong>Enabled:</strong> ' + (rule.enabled ? 'Yes' : 'No') + '</div>';
                  html += '<div class="rule-field"><strong>Create Time:</strong> ' + rule.createTime + '</div>';
                  html += '</div></div>';
                });
                
                container.innerHTML = html;
            } else {
                container.innerHTML = '<p>No interception rules found in storage.</p>';
            }
        });
    </script>
</body>
</html>
